<template>
	<view>
		<view class="bg_list">
			<view class="bg_pic">
				<view class="bg_pic_list">
					<image src="https://img1.baidu.com/it/u=2360260634,815392718&fm=253&fmt=auto&app=138&f=JPEG?w=502&h=500"></image>   
				</view>
			</view>
			<view class="bg_name">{{ name }}</view>
			<view class="bg_rule">普通会员(ID:{{ id }})</view>
			<view class="bg_cate">
				<view class="vip_content flex flex-wrap ">
					<block :key="i" v-for="(item, i) in viplist">
						<view class="vip_list flex justify-center flex-direction align-center"
							:class="isselect == i ? 'selected' : ''" @tap="selectVIP(i, item)">
							<view class="vip_item_icon "></view>
							<view class="vip_list_price ">{{ item.vip_price }}元</view>
							<view class="vip_list_title ">
								<text>{{ item.title }}</text></view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="bg_bt">
			<view class="bg_bt_yop">
				<view class="bg_fee">
					<view class="cu-form-group">
						<checkbox color="#ffd4a2" activeBorderColor="#ffd4a2" :class="checkbox[2].checked?'checked':''" :checked="checkbox[2].checked?true:false"
						 value="C"></checkbox>
						<view class="bg_fee_title">开通前请同意<text>《会员服务协议》</text></view>
						
					</view>
				</view>
				<view class="bg_tb">如何关闭自动续费</view>
				<view class="bt_connup">确认协议并开通</view>
				<view class="vip_tl">VIP会员特权</view>
				<view class="vip_mory">
					<view class="vip_mory_list" v-for="(privilege, index) in privileges" :key="index">
						<view class="vip_mory_list_pic">
							<image :src="privilege.icon"></image>
						</view>
						<view class="vip_mory_list_title">
							{{ privilege.text }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isselect: 0,
				id: '', // 存储用户ID
				name: '', // 存储用户名
				viplist: [{
						vip_price: 19.9,
						title:'连续包月',
					},
					{
						vip_price: 39.9,
						title: '月卡',
					},
					{
						vip_price: 89.9,
						title: '季卡',
					},
					{
						vip_price: 89.9,
						title: '年卡',
					},
				],
				checkbox: [{
					value: 'A',
					checked: true
				}, {
					value: 'B',
					checked: true
				}, {
					value: 'C',
					checked: false
				}],
				privileges: [
					{ text: '购物9.8折', icon: '../static/discount.png' },
					{ text: '专属客服', icon: '../static/customer_service.png' },
					{ text: '优先发货', icon: '../static/priority_shipping.png' },
					{ text: '生日礼包', icon: '../static/birthday_gift.png' },
					{ text: '积分加倍', icon: '../static/double_points.png' },
					{ text: '免费退换货', icon: '../static/free_return.png' }
				]
			}
		},
		// 其他页面
		onLoad() {
		  const userInfo = getApp().globalData.userInfo;
		  console.log(userInfo);
		},
		methods: {
			selectVIP(index, item) {
				this.isselect = index;
				this.viplist[index] = item; // 更新选中的VIP项目
			},
			// 假设这个方法是用来处理登录并获取用户信息的
			fetchUserInfo() {
				// 这里应该是登录逻辑，登录成功后从控制台或API获取用户信息
				// 假设我们从控制台获取到了用户信息
				this.id = '001'; // 从控制台获取的用户ID
				this.name = 'xi'; // 从控制台获取的用户名
			}
		},
		mounted() {
			this.fetchUserInfo(); // 组件挂载后获取用户信息
		}
	}
</script>

<style  lang="scss">
.bg_list{
	background-color: #343434;
	width: 100%;
	height: 700upx;
	overflow: hidden;
}
.bg_pic{
	width: 150upx;
	height: 150upx;
	background-color: #585858;
	border-radius: 90upx;
	margin: 20upx auto;
	overflow: hidden;
}
.bg_pic_list{
	width: 130upx;
	height: 130upx;
	border-radius: 90upx;
	margin:10upx;
}
.bg_pic_list image{
	width: 130upx;
	height: 130upx;
	border-radius: 90upx;
}
.bg_cate{
	width: 80%;
	height: 380upx;
	background-color: #f6e2c0;
	border-radius: 30upx;
	margin: 0 auto;
	margin-top: 50upx;
}
.bg_name{
	width: 100%;
	text-align: center;
	color: #ffffff;
	font-weight: bold;
	font-size: 35upx;
	padding: 5upx;
}
.bg_rule{
	width: 330upx;
	height: 50upx;
	background-color: bisque;
	text-align: center;
	margin: auto;
	border-radius: 15upx;
}

.vip_content {
		padding: 20upx 10upx;
	}

	.vip_list {
		position: relative;
		border-radius: 32upx;
		padding: 10upx;
		background: #f7e8ca;
		box-shadow: 0 0.025rem 0.5rem 0 #f7e8ca !important;
		border: 1px solid #ffbd6a;
		margin: 20upx;
		width: 230upx;
		box-sizing: border-box;
		z-index: 1;
		align-items: center;
		flex-direction: column;
		justify-content: center !important;

		.vip_item_icon {
			width: 50upx;
			height: 15upx;
			border-radius: 10upx;
			background-color: bisque;
		}

		.vip_list_title {
			font-size: 20upx;
			font-weight: 600;
			color: #886b6b;
		}

		.vip_list_price {
			color: #b58246;
			font-size: 46upx;
			font-weight: 600;
			vertical-align: text-bottom;
		}

	}

	.flex {
		display: flex;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}
	.vip_list.selected{
		// position: absolute;
		border-radius: 38upx;
			background-color: #ffd4a2;
		color: #fff !important;
	}
	.bg_bt{
		background-color: #343434;
		box-shadow:1px -2rem 20rem 20px #f7e8ca !important;
		width: 100%;
		height: 700upx;
		overflow: hidden;
		margin-top: -5upx;
	}
	.bg_bt_yop{
    background-color: #343434;
    box-shadow: inset -1px -4rem 4rem 0px #f7e8ca !important;
    width: 100%;
    height: 700px;
	overflow: hidden;
	}
	.bg_fee{
		width: 80%;
		height: 60upx;
		background-color: #f6e2c0;
		margin: 30upx auto;
		border-radius: 90upx;
	}


	.cu-form-group {
		padding: 1upx 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.cu-form-group.checkbox{
		border-radius: 90upx !important;
	}
	.bg_fee_title{
		color: #d7b37c;
		font-size: 30upx;
	}
	.bg_tb{
		width: 100%;
		text-align: center;
		color: #b58246;
	}
	.bt_connup{
		background-color: #f1d9a5;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		width: 60%;
		margin: 20upx auto;
		border-radius: 90upx;
		color: #b58246;
	}
	.vip_tl{
		width: 100%;
		text-align: center;
		font-size: 36upx;
		font-weight: bold;
		color: #f1d9a5;
	}
	.vip_mory{
		width: 100%;
		height: auto;
		margin-top: 30upx;
	}
	.vip_mory_list{
		width: 33.33%;
		height: 170upx;
		overflow: hidden;
		float: left;
	}
	.vip_mory_list_pic{
		width: 90upx;
		height: 90upx;
		background-color: #6b6459;
		background-image: linear-gradient(62deg, #6b6459 0%, #4c4a4a 100%);
		margin: 0 auto;
		border-radius: 90upx;
	}
	.vip_mory_list_pic image{
		width: 50upx;
		height: 50upx;
		margin: 20upx;
	}
	.vip_mory_list_title{
		text-align: center;
		color: #f1d9a5;
		font-size: 30upx;
		margin-top: 10upx;
	}

</style>
